{% extends 'public/body.html' %}



{% block title %}

    用户注册
{% endblock %}

{% block main %}
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="./login.html">登录</a></em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form autocomplete="off" id="myform">

                    <p>
                        <label>手机号：</label>
                        <input class="upt" type="text" name="username" v-model="username"/>
                        <em></em>
                    </p>
                    <p>
                        <label>密码：</label>
                        <input class="upt" type="password" name="password" v-model="password"
                               placeholder="密码长度为6-20位"/>
                        <em></em>
                    </p>
                    <p>
                        <label>确认密码：</label>
                        <input class="upt" type="password" v-model="confirmPassword"
                               placeholder="请再次输入密码"/>
                        <em></em>
                        <span class="source-tag-msg">两次输入的密码必须保持一致</span>
                    </p>

                    <p>
                        <label>电子邮箱：</label>
                        <input id="email" class="upt" type="text" name="email" v-model="email"
                               placeholder="请输入邮箱"/>
                        <em></em>
                        <span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
                    </p>

                    <p><a class="btn" @click="register">注册</a></p>
                </form>
            </div>
        </section>
    </div>

{% endblock %}

{% block vue %}

    <script>
        Vue.createApp({
            data() {
                return {
                    username: '',
                    password: '',
                    confirmPassword: '',
                    email: ''
                }
            },
            methods: {
                register(event) {
                    event.preventDefault()
                    if (!this.username) {
                        layer.msg('手机号不能为空', {icon: 5})
                        return
                    }
                    // if (!/^1[3-9]\d{9}$/.test(this.username)) {
                    //    layer.msg('手机号格式不正确', {icon: 5})
                    //  return
                    //}


                    if (!this.password) {
                        layer.msg('密码不能为空', {icon: 5})
                        return
                    }
                    //if (this.confirmPassword !== this.password) {
                    //   layer.msg('两次输入的密码不一致', {icon: 5})
                    //   return
                    //}

                    if (!this.email) {
                        layer.msg('邮箱不能为空', {icon: 5})
                        return
                    }
                    // if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email)) {
                    //    layer.msg('邮箱格式不正确', {icon: 5})
                    //    return
                    // }

                    const index = layer.load(2)
                    axios.post('{% url 'register' %}', {
                        username: this.username,
                        password: this.password,
                        email: this.email
                    }, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
                        if (res.data.code === 200) {
                            layer.msg(res.data.msg)
                            setTimeout(() => {
                                window.location.href = `/register2?uid=${res.data.uid}&sign=${res.data.sign}`;
                            }, 2000)
                        } else {
                            layer.msg(res.data.msg, {icon: 5})
                        }

                    }).finally(() => {
                        layer.close(index)
                    })

                }
            }

        }).mount('#main')


    </script>

{% endblock %}